<template>
  <div
    class="index-frame"
    v-if="!( gameMiddle && gameTail && gameHead && gameLow)"
    v-loading="!( gameMiddle && gameTail && gameHead && gameLow)"
    style="height: 100vh"
  ></div>
  <div class="index" v-else>
    <!-- 顶部图片 -->
    <TopPicture class="m-bt-15"/>

    <!-- 搜索导航列表 -->
    <SearchCardG :data="gameHead" class="m-bt-15"/>

    <!-- 游戏卡片 -->
    <GameCard class="m-bt-15" :data="gameHead.headPageGames" />

    <div class="main m-bt-15">
      <div class="main-left">
        <!-- 游戏banner图 -->
        <BannerLeft :data="gameMiddle.middleNetworkGames" />
      </div>

      <div class="main-center">
        <!-- 游戏资讯推荐 -->
        <NewstRecomGame :data="gameMiddle.gameInfoVos" />
      </div>

      <div class="main-right">
        <RecommendedGame :data="gameMiddle.middleHotGames" />
      </div>
    </div>

    <!-- 单机游戏推荐 -->
    <div v-if="gameTail.tailAloneGames && gameTail.tailAloneGames.length > 0" class="main m-bt-15">
      <div class="main-left-m">
        <RecomAloneGame title="单机游戏推荐" :data="gameTail.tailAloneGames" @callback="gotoRouter('/game/alone-list.html',router,{param: '389_409_422_1'},'game-alone-ist')"/>
      </div>
      <div class="main-right-m">
        <AloneGameRank :data="gameTail" :gameType="3"/>
      </div>
    </div>

    <!-- 网络游戏推荐 -->
    <div v-if="gameTail.tailNetworkGames && gameTail.tailNetworkGames.length > 0" class="main m-bt-15">
      <div class="main-left-m">
        <RecomAloneGame title="网络游戏推荐" :data="gameTail.tailNetworkGames" @callback="gotoRouter('/game/alone-list.html',router,{param: '389_397_422_1'},'game-alone-ist')"/>
      </div>
      <div class="main-right-m">
        <AloneGameRank :data="gameTail"  :gameType="4"/>
      </div>
    </div>
    
    <!-- 网页游戏推荐 -->
    <div v-if="gameLow.tailPageGames && gameLow.tailPageGames.length > 0" class="main m-bt-15">
      <div class="main-left-m">
        <RecomWebGame title="网页游戏推荐" :data="gameLow.tailPageGames" @callback="gotoRouter('/game/web-list.html',router,{ param:'389_410_446_1'},'game-web-list')"/>
      </div>
      <div class="main-right-m">
        <AloneGameRank :data="gameLow"  :gameType="5"/>
      </div>
    </div>

    <!-- 手机游戏推荐 -->
    <div v-if="gameLow.tailSyGames && gameLow.tailSyGames.length > 0" class="main m-bt-15">
      <div class="main-left-m">
        <RecomMGame title="手机游戏推荐" :data="gameLow.tailSyGames" @callback="gotoRouter('/game/mobile-list.html',router,{ param: '384_407_0_1'}, 'game-mobile-list')"/>
      </div>
      <div class="main-right-m">
        <AloneGameRank :data="gameLow"  :gameType="6"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import TopPicture from "@/components/TopPicture.vue";
import SearchCardG from "@/components/SearchCardG.vue";
import GameCard from "@/components/GameCard.vue";
import BannerLeft from "@/components/BannerLeft.vue";
import NewstRecomGame from "@/components/NewstRecomGame.vue";
import RecommendedGame from "@/components/RecommendedGame.vue";
import RecomAloneGame from "@/components/RecomAloneGame.vue";RecomMGame
import RecomMGame from "@/components/RecomMGame.vue";
import RecomWebGame from "@/components/RecomWebGame.vue";
import AloneGameRank from "@/components/AloneGameRank.vue";
import RecomMobileGame from "@/components/RecomMobileGame.vue";
import { onBeforeMount, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter()
const route = ref(useRoute());

const gameHead = ref(null);
const gameMiddle = ref(null);
const gameTail = ref(null);
const gameLow = ref(null);
axios.get("/api/download/game/head").then((res) => {
  gameHead.value = res.data.data;
});
axios.get("/api/download/game/middle").then((res) => {
  gameMiddle.value = res.data.data;
});
axios.get("/api/download/game/tail").then((res) => {
  gameTail.value = res.data.data;
});
axios.get("/api/download/game/low").then((res) => {
  gameLow.value = res.data.data;
  console.log(gameLow.value)
});
</script>

<style lang="less" scoped>
.index {
  min-height: 500px;

  .index-content {
    background: #fff;
  }

  .main {
    display: flex;
    justify-content: space-between;

    &-left {
      width: 25%;
    }

    &-left-m {
      width: 74.5%;
    }

    &-center {
      width: 49%;
    }

    &-center-m {
      width: 100%;
    }

    &-right {
      width: 25%;
    }

    &-right-m {
      width: 25%;
    }
  }
}
</style>
